  <template>
  <div class="agile-project">
    <div class="first-tab">
      <div class="backbtn" @click="backto()">返回项目列表</div>

      <div class="tablistbox">
        <a
          href="javascript:void(0);"
          :class="index == isactive ? 'active' : ''"
          @click="handelchange(index)"
          :key="index"
          v-for="(item, index) in tablist"
          >{{ item.name }}</a
        >
      </div>
      <survey :is="currentView" keep-alive></survey>
    </div>
  </div>
</template>

<script>
import calendar from './projectTab/detailTabs/calendar.vue';
import introduce from './projectTab/detailTabs/introduce.vue';
import survey from './projectTab/agileTab/survey.vue';
import teaching from './projectTab/detailTabs/teaching.vue';
import demandboard from './projectTab/detailTabs/demandboard.vue';
import demandlist from './projectTab/detailTabs/demandlist.vue';

import { getprodetail } from '@/api//project/prodetail';

export default {
  name: 'agileproject',
  data() {
    return {
      isactive: this.$route.params.index ? this.$route.params.index : 0,
      tablist: [
        { name: '项目概况' },
        { name: '项目介绍' },
        { name: '需求列表' },
        { name: '需求看板' },
        { name: '项目日历' },
        { name: '教学资料' }

      ],
      currentView: this.$route.params.currentView ? this.$route.params.currentView : 'survey'
    };
  },
  components: {
    calendar,
    introduce,
    survey,
    teaching,
    demandboard,
    demandlist
  },
  mounted() {
    // getprodetail(){
    //   console.log(this.$route.params.projectid);
    if (this.$route.params.projectLabel !== 1) {
      const res1 = this.tablist.filter(item => {
        return item.name !== '教学资料';
      });
      this.tablist = res1;
    }
    // console.log(typeof this.$route.params.projectId, this.$route.params.projectId, this.$route.params.projectLabel);
    // }
    getprodetail(Number(this.$route.params.projectId), Number(sessionStorage.getItem('usertype'))).then(res => {
      // console.log(res);
    });
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'survey';
      } else if (index === 1) {
        this.currentView = 'introduce';
      } else if (index === 2) {
        this.currentView = 'demandlist';
      } else if (index === 3) {
        this.currentView = 'demandboard';
      } else if (index === 4) {
        this.currentView = 'calendar';
      } else if (index === 5) {
        this.currentView = 'teaching';
      }
    },
    backto() {
      this.$router.replace('/project');
    }
  }
};
</script>

<style lang="less" scoped>
.agile-project {
  padding-bottom: 20px;
}
.first-tab {
  margin: 0 20px;
  margin-top: 20px;
  position: relative;
  .backbtn {
    position: absolute;
    right: 0;
    top: 20px;
    color: #555;
    font-size: 16px;
    cursor: pointer;
  }
  a {
    color: #555;
    width: 138px;
    height: 45px;
    border: 1px solid #ececec;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #ececec;
    display: inline-block;
    box-shadow: 0px 0px 1px 0px #99999980;
  }
  .active {
    position: relative;
    width: 138x;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0px #99999980;
  }
}
</style>
